<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Weba Novare</title>
        <h:outputStylesheet name="style/template.css" />
        <script type="text/javascript" src="../client/js/lib/jquery-1.7.1.min.js"/>
        <script type="text/javascript" src="../client/js/gui/popup.js"/>
        <script type="text/javascript" src="../client/js/gui/popupLogin.js"/>
    </h:head>
    <h:body>
        <ui:composition>
            <c:if test="#{auth.addMe()}" />
            <div class="menuContainer">
                <div class="menuWrapper">
                    <ul class="menu" rel="ver1">
                        <li style="margin-right: 10px;"><h:graphicImage value="#{resource['images:webanovare.png']}" height="120" width="200"/></li>
                        <li class="liWithBg"><a class="styled" href="index.xhtml">Home</a></li>
                        <li class="liWithBg"><a class="styled" href="game.xhtml">Play</a></li>
                        <li class="liWithBg"><a class="styled" href="highscore.xhtml">Highscore</a></li>
                        <li class="liWithBg"><a class="styled" href="rules.xhtml">Rules</a></li>
                        <li class="liWithBg"><a class="styled" href="about.xhtml">About</a></li>
                    </ul>
                    <ul class="loginAndOut">
                        <c:if test="#{auth.loggedIn}">
                            <c:choose>
                                <c:when test="#{auth.admin}">
                                    <li><label>Logged in as: </label><a href="admin.xhtml"><h:outputText styleClass="loggedInText" value="#{auth.loggedInAs}" /></a></li>
                                </c:when>
                                <c:otherwise>
                                    <li><label>Logged in as: </label>
                                        <h:link styleClass="loggedInText" value="#{auth.loggedInAs}" outcome="profile">
                                            <f:param name="username" value="#{auth.loggedInAs}"></f:param>
                                        </h:link>
                                    </li>
                                </c:otherwise>
                            </c:choose>

                            <li>
                                <h:form>
                                    <h:commandLink styleClass="logRegLink" action="#{auth.logout}" value="Logout" />
                                </h:form>
                            </li>
                        </c:if>
                        <c:if test="#{auth.notLoggedIn}">
                            <li><a id="register" class="logRegLink">+Register</a></li>
                            <li><a id="loginLink" class="logRegLink">+Login</a></li>
                        </c:if>
                    </ul>
                </div>
            </div>
            <div id="popupLogin">
                <a id="popupLoginClose">x</a>
                <form method="post" action="j_security_check">
                    <h:outputLabel styleClass="registerLoginLabel" for="j_username" value="Username" />
                    <h:inputText styleClass="loginInput" id="j_username" size="10" autocomplete="off"/>  
                    <h:message for="name" showSummary="true" showDetail="false" style="color: red" />
                    <h:outputLabel styleClass="registerLoginLabel" for="j_password" value="Password" />
                    <h:inputSecret styleClass="loginInput" id="j_password" size="10" autocomplete="off" />
                    <h:message for="passwd" showSummary="true" showDetail="false" style="color: red" />
                    <h:commandButton styleClass="registerLoginButton" id="login" value="Login" />
                    <h:button styleClass="registerLoginButton" value="Cancel"  />
                    <h:messages showSummary="true" showDetail="false" style="color: red"/>
                </form>
            </div>
            <div id="popupContact">  
                <a id="popupRegClose">x</a>
                <h1>Create a new account</h1>
                <h4>* are required fields</h4>

                <h:form>
                    <h:outputLabel styleClass="registerLoginLabel" for="name" value="Username" />
                    <h:inputText styleClass="registerInput" id="name" value="#{register.login}" size="10" autocomplete="off" /> 
                    <h:message for="name" showSummary="true" showDetail="false" style="color: red" />
                    <h:outputLabel styleClass="registerLoginLabel" for="passwd" value="Password" />
                    <h:inputSecret styleClass="registerInput" id="passwd" value="#{register.passwd}" size="10" autocomplete="off" />
                    <h:message for="passwd" showSummary="true" showDetail="false" style="color: red" />
                    <h:commandButton styleClass="registerLoginButton" id="register" value="Register" action="#{register.action}" />
                    <h:button styleClass="registerLoginButton" onclick="disableRegPopup();" value="Cancel"  />
                    <h:messages showSummary="true" showDetail="false" style="color: red"/>
                </h:form>
            </div>
            <div id="backgroundPopup"></div>
        </ui:composition>
    </h:body>
</html>
